<template>
	<div>
		<ma-body>
			<ma-refresh slot="content">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"></image>
				<div class="museum-top">
					<image src="../../../static/img/museumDetailBg.png" mode="aspectFill" class="bg-img"></image>
					<div style="position: relative;">
						<image src="../../../static/img/museumBg.png" mode="aspectFill"
							style="position: absolute;width: 37.33vw;height: 21.33vw;left: 31.47vw;top: 10.67vw;">
						</image>
						<span
							style="position: absolute;font-size: 2.67vw;font-weight: 600;color: #000;top: 24.8vw;left: 39.47vw;width: 21.33vw;text-align: center;">NO.{{ museumDetail.info.id }}</span>
					</div>
				</div>
				<div class="info-box">
					<div style="text-align: center;">
						<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427"
							style="text-align: center;transform: rotate(90deg);"></image>
					</div>
					<div class="center" style="justify-content: space-between;padding-right: 5.33vw;">
						<span class="jiu-font48-fff" style="font-size: 5.87vw;">{{ museumDetail.info.name }}</span>
						<div class="center jiu-font24-aaa" style="color: #FFCE80;">
							<image src="../../../static/img/dianzan.png" class="image427" mode="aspectFill"
								style="margin-right: 1.07vw;"></image>
							{{ museumDetail.likeCount }}
						</div>
					</div>
					<div class="desc">
						{{ museumDetail.info.desc }}
					</div>

					<div class="create-box">
						<div class="center">
							<image :src="museumDetail.owner.avatar" mode="aspectFill" class="create-img"></image>
							<div style="display: flex;flex-direction: column;margin-left: 2.13vw;">
								<span class="jiu-font28-fff">{{ museumDetail.owner.nickname }}</span>
								<span class="jiu-font24-555">ID：{{ museumDetail.owner.uuid }}</span>
							</div>
						</div>
						<span class="btn" @tap="guan">关注</span>
					</div>

					<div class="museumBao" v-if="museumDetail.mainCollection">
						<div style="background-color: #000;width: 91.47vw;border-radius: 6.4vw;"
							@tap="toDetail(museumDetail.mainCollection.spu.spuId)">
							<div style="width: 100%;height: 100%;position: relative;">
								<!-- <image src="@/static/img/detailBorder.png" mode=""></image> -->
								<image src="@/static/img/detailBorder000.png" mode="aspectFill" class="bg-border">
								</image>
								<image :src="museumDetail.mainCollection.spu.cover || ''" mode="aspectFill" class="start-bg">
								</image>
								<image src="@/static/img/lookBig.png" mode="aspectFill" class="lookBig"></image>
								<div class="right-box">
									<image src="../../../static/img/museumStart.png" mode="aspectFill" class="image427">
									</image>
									<span>镇馆之宝</span>
								</div>
								<div class="num-box">
									<image src="../../../static/img/num.png" mode="aspectFill" class="num-img"></image>
									<span>{{ Number(museumDetail.mainCollection.collection.nftItemId) + Number(1) }}/{{museumDetail.mainCollection.spu.nftMaxSupply }}</span>
								</div>
							</div>
							<div class="museumInfo-box">
								<span class="jiu-font32-fff"
									style="width: 77.87vw;overflow: hidden;text-overflow: ellipsis;">{{ museumDetail.mainCollection.spu.spuTitle }}</span>
								<div class="center" style="margin-top: 2.4vw;justify-content: space-between;">
									<div class="center">
										<image :src="museumDetail.owner.avatar" mode="aspectFill" class="image427"
											style="border-radius: 50%;"></image>
										<span class="jiu-font24-555"
											style="margin: 0 1.07vw;">{{ museumDetail.owner.nickname }}</span>
										<span class="create-border">创作者</span>
									</div>
									<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427">
									</image>
								</div>
							</div>
						</div>
						<image :src="museumDetail.theme.img || ''" mode="aspectFill" style="height: 28.8vw;width: 100%;">
						</image>
					</div>
				</div>
				<div style="background-color: #000;padding: 9.07vw 0 4.27vw 4.27vw;">
					<span class="jiu-font32-555">其他藏品</span>
					<div class="list-box">
						<div v-for="item in museumDetail.otherCollection" @tap="toDetail(item.spu.spuId)">
							<div class="item-box" v-if="item">
								<div style="position: relative;">
									<image :src="item.spu.cover" mode="aspectFill" class="item-bg"></image>
									<div class="num-box" style="top: 34.13vw;left: 2.13vw;height: 4.27vw;">
										<image src="../../../static/img/num.png" mode="aspectFill" class="num-img">
										</image>
										<span>{{ item.collection.nftItemIdV }}/{{ item.spu.nftMaxSupply }}</span>
									</div>
								</div>
								<div class="small-info">
									<span class="jiu-font32-fff smallTitle"
										style="height: 11.73vw;">{{ item.spu.spuTitle }}</span>
									<div class="center" style="margin-top: 2.4vw;justify-content: space-between;">
										<div class="center">
											<image :src="item.creator.avatar" mode="aspectFill" class="image427"
												style="border-radius: 50%;"></image>
											<span class="jiu-font24-555"
												style="margin: 0 1.07vw;overflow: hidden;text-overflow: ellipsis;">{{ item.creator.name }}</span>
											<span class="create-border">创作者</span>
										</div>
										<image src="../../../static/img/enter16.png" mode="aspectFill" class="image427">
										</image>
									</div>
								</div>
							</div>
							<image src="../../static/img/coll-dipan.png" mode="aspectFill"
								style="width: 44.8vw;height: 8.53vw;" v-if="item"></image>
						</div>
					</div>
				</div>
			</ma-refresh>
			<div slot="footer">
				<div style="display: flex;justify-content: space-between;padding: 2.13vw 5.33vw 2.13vw 6.4vw;">
					<div class="column">
						<image src="@/static/img/share.png" mode="heightFix" class="image64"></image>
						<span class="pet-font-aaa">分享</span>
					</div>
					<div class="column">
						<div class="image64">
							<image src="../../static/img/dianzan.png" mode="heightFix"
								style="width: 5.5vw;height: 5.5vw;"></image>
						</div>
						<span class="pet-font-aaa" @tap="$u.throttle(onLike(), 500)">点赞</span>
					</div>
					<div class="btn" @tap="onCollectionRandom">
						随机逛逛
					</div>
				</div>
			</div>
		</ma-body>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				detailType: 'my',
				museumDetail: {}
			}
		},
		methods: {
			async getCollectionInfoAggr(id) {
				let res = await this.$u.api.getCollectionInfoAggr({}, id);
				this.museumDetail = res;
			},
			async onCollectionRandom() {
				let res = await this.$u.api.onCollectionRandom();
				this.museumDetail = {};
				this.museumDetail = res;
				this.$forceUpdate();
			},
			onLike() {
				let id = this.museumDetail.info.id;
				this.$u.api.onCollectionInfoLike({}, id).then(res => {
					if (res.msg == '点赞成功') {
						this.museumDetail.likeCount++
					} else if (res.msg == '取消点赞') {
						this.museumDetail.likeCount--
					}
				})
			},
			toDetail(id) {
				this.$ma.route.detail({
					spuId: id
				})
			},
			guan() {
				uni.showToast({
					icon: "none",
					title: "敬请期待"
				})
			}
		},
		onLoad(e) {
			this.getCollectionInfoAggr(e.id);
		}
	}
</script>

<style lang="scss">
	.column {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.pet-font-aaa {
		font-size: 2.67vw;
		font-weight: 300;
		color: #aaa;
	}

	.btn {
		width: 62.67vw;
		line-height: 12.8vw;
		border-radius: 6.4vw;
		background: linear-gradient(90deg, #FFCE80 0%, #A972FF 100%);
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48);
		text-align: center;
		font-size: 3.73vw;
		font-weight: 500;
		color: #000;
	}

	.item-bg {
		width: 40.53vw;
		height: 40.53vw;
		border-radius: 5.33vw;
	}

	.image427 {
		width: 4.27vw;
		height: 4.27vw;
	}

	.image64 {
		width: 6.4vw;
		height: 6.4vw;
	}

	.lookBig {
		width: 8.4vw;
		height: 8.4vw;
		z-index: 6;
		position: absolute;
		top: 4.27vw;
		right: 2.27vw;
	}

	.center {
		display: flex;
		align-items: center;
	}

	.num-box {
		display: inline-flex;
		align-items: center;
		border-radius: 1.07vw;
		background-color: #323232;
		position: absolute;
		bottom: 6.4vw;
		left: 6.4vw;

		.num-img {
			width: 8.8vw;
			height: 4.27vw;
			display: block;
			border-radius: 1.07vw;
		}

		span {
			padding: 0 1.07vw;
			color: #FFCE80;
			font-size: 2.67vw;
			font-weight: 300;
		}
	}

	.create-border {
		width: 10.67vw;
		line-height: 4.27vw;
		text-align: center;
		font-size: 2.67vw;
		font-weight: 300;
		color: #A972FF;
		border: 1px solid #A972FF;
		border-radius: 1.07vw;
	}

	.museum-top {
		position: relative;
		text-align: center;
		width: 100%;
		height: 40vw;

		.bg-img {
			width: 100%;
			height: 40vw;
			position: absolute;
			left: 0;
		}
	}

	.info-box {
		background-color: #1B1B1B;
		padding: 4.8vw 5.33vw;
		padding-right: 0;
		display: flex;
		flex-direction: column;

		.desc {
			margin-top: 4.27vw;
			font-size: 3.2vw;
			font-weight: 300;
			color: #555;
			padding-right: 5.33vw;
		}

		.create-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #000;
			padding: 3.2vw 4.27vw;
			border-radius: 12.8vw 0 0 12.8vw;
			margin-top: 6.4vw;

			.create-img {
				width: 10.67vw;
				height: 10.67vw;
				border-radius: 50%;
			}

			.btn {
				line-height: 8.53vw;
				width: 17.07vw;
				text-align: center;
				background: #A972FF;
				box-shadow: 0vw 1vw 2vw rgba(71, 12, 114, 0.48);
				border-radius: 5.33vw;
				font-size: 3.2vw;
				font-weight: 500;
				color: #000;
			}
		}

		.museumBao {
			padding-right: 5.33vw;
			background-color: #1b1b1b;
			padding-top: 8.53vw;
			position: relative;

			.bg-border {
				width: 91.47vw;
				height: 91.47vw;
				z-index: 1;
				display: block;
				// position: absolute;
			}

			.start-bg {
				width: 87.21vw;
				height: 87.21vw;
				position: absolute;
				top: 2.13vw;
				left: 2.13vw;
				border-radius: 6.4vw;
			}

			.right-box {
				position: absolute;
				top: 6.4vw;
				left: 6.4vw;
				padding: 2.13vw 3.2vw;
				background-color: #1B1B1B;
				border-radius: 4.27vw;
				display: flex;
				align-items: center;

				span {
					color: #fff;
					font-size: 3.2vw;
					font-weight: 500;
					margin-left: 1.07vw;
				}
			}

			.museumInfo-box {
				padding: 2.14vw 4.27vw 6.4vw 6.4vw;
				width: 91.47vw;


			}
		}

		.museum-title {
			padding-top: 9.07vw;
			padding-left: 4.27vw;
		}
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;

		.item-box {
			display: flex;
			flex-direction: column;
			padding: 2.13vw;
			background-color: #1b1b1b;
			border-radius: 6.4vw;
			margin-top: 4.27vw;
			margin-right: 1.87vw;

			.small-info {
				display: flex;
				flex-direction: column;
				padding: 2.13vw 4.53vw 2.87vw 2.13vw;

				.smallTitle {
					display: block;
					width: 33.87vw;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
				}
			}
		}
	}

	.edit-btn {
		display: block;
		width: 91.47vw;
		line-height: 12.8vw;
		text-align: center;
		background: #A972FF;
		box-shadow: 0vw 3vw 5vw rgba(71, 12, 114, 0.48);
		border-radius: 6.4vw;
		font-size: 3.73vw;
		font-weight: 500;
		color: #000;
	}
</style>
